<template>
  <div class="bottomSynopsis">
    <div class="codeWrap">
      <div class="code-recommend">
        <div class="sort">
          <img src="../../../static/images/Accounts.jpg" alt>
          <p>扫描二维码微信关注</p>
        </div>
        <div class="sort">
          <img src="../../../static/images/program.jpg" alt>
          <p>扫描二维码打开小程序</p>
        </div>
        <div class="sort">
          <img src="../../../static/images/xiangqiSj.jpg" alt>
          <p>扫描二维码下载商家APP</p>
        </div>
      </div>
      <div class="relation">
        <h3>联系我们</h3>
        <p>客服&举报电话：027-59728120（推荐）</p>
        <p class="independent">027-59728176</p>
        <p>商家热线：027-59728120（推荐）</p>
        <p>客服热线：027-59728176</p>
        <p>邮箱：xiangqi2018boss@163.com</p>
        <p>武汉七多多商贸有限公司</p>
      </div>
    </div>
    <div class="guide">
      <span>
        <router-link to="/settled">商家入驻</router-link>
      </span>
      <span>
        <router-link to="/campus">校园招聘</router-link>
      </span>
      <span>
        <router-link to="/aboutUs">关于我们</router-link>
      </span>
      <span>
        <router-link to="/appdownload">下载App</router-link>
      </span>
      <span>
        <router-link to="/protection">消费者保障</router-link>
      </span>
      <span>
        <router-link to="/report">廉正举报</router-link>
      </span>
      <span>Investor Relations</span>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/bottom/footer";
export default {
  name: "bottomSynopsis",
  data() {
    return {};
  },
  components: {
    Footer
  },
};
</script>

<style lang="less" scoped>
.bottomSynopsis {
  width: 100%;
  height: 330px;
  background-color: #f2f2f2;
  margin-top: 20px;
  .codeWrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .code-recommend {
      width: 60%;
      height: 230px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      border-right: 1px solid black;
      .sort {
        width: 162px;
        height: 162px;
        text-align: center;
        padding-right: 60px;
        img {
          width: 162px;
          height: 162px;
        }
        p {
          text-align: center;
          color: #4d4d4d;
          padding-top: 4px;
        }
      }
    }
    .relation {
      width: 40%;
      height: 230px;
      color: #4d4d4d;
      line-height: 30px;
      padding: 50px 0px 0px 60px;
      .independent {
        padding-left: 108px;
      }
    }
  }
  .guide {
    width: 100%;
    height: 40px;
    text-align: center;
    background-color: #f2f2f2;
    span {
      border-right: 1px solid #4d4d4d;
      padding: 0px 20px;
    }
    span:hover {
      color: #ec6d2d;
      cursor: pointer;
    }
    .guide,
    span:last-child {
      border-right: none;
    }
  }
 
}
</style>


